<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title  am-cf">考勤班级列表</div>
        </div>
        <div class="widget-body  am-fr">
          <div class="am-u-sm-12 am-form ">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2
                  v-model="query.areaTeamId"
                  :options="areaTeams"
                >
                  <option
                    value=""
                    disabled
                  >区域</option>
                </select2>
              </div>
            </div>
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2
                  v-model="query.busTeamId"
                  :options="busTeams"
                >
                  <option value="">业务组</option>
                </select2>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2
                  v-model="query.periodId"
                  :options="periods"
                >
                  <option value="">期数</option>
                </select2>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2
                  v-model="query.gradeId"
                  :options="grades"
                >
                  <option value="">年级</option>
                </select2>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2
                  v-model="query.subjectId"
                  :options="subjects"
                >
                  <option value="">科目</option>
                </select2>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2 v-model="query.segmentNo">
                  <option value="">段次</option>
                  <option value="1">段次1</option>
                  <option value="2">段次2</option>
                  <option value="3">段次3</option>
                  <option value="4">段次4</option>
                  <option value="5">段次5</option>
                  <option value="6">段次6</option>
                  <option value="7">段次7</option>
                  <option value="8">段次8</option>
                </select2>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <input
                  type="text"
                  class="am-form-field"
                  placeholder="班级编号"
                  v-model="query.classNo"
                >
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <input
                  type="text"
                  name="className"
                  v-model="query.className"
                  placeholder="班级名称"
                />
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <input
                  type="text"
                  name="teacherName"
                  v-model="query.teacherName"
                  placeholder="任课老师姓名"
                />
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <el-date-picker
                  v-model="classDate"
                  type="daterange"
                  placeholder="上课日期"
                >
                </el-date-picker>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2
                  v-model="query.timeSegment"
                  :disabled="!query.periodId || (!classDate || !classDate[1])"
                >
                  <option value="">上课时间</option>
                  <option
                    v-for="(timeItem, index) in timeList"
                    :key="index"
                    :value="timeItem"
                  >{{timeItem}}</option>
                </select2>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2 v-model="query.attendanceStatus">
                  <option value="">是否考勤</option>
                  <option value="0">未考勤</option>
                  <option value="1">已考勤</option>
                </select2>
              </div>
            </div>
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <input
                  type="text"
                  class="am-form-field"
                  placeholder="讲次"
                  v-model="query.lectureNo"
                >
              </div>
            </div>
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-6 am-u-end">
              <div class="am-form-group">
                <button
                  type="button"
                  class="am-btn am-btn-default am-btn-success"
                  @click="search"
                ><span class="am-icon-search"></span>查询
                </button>
                <button
                  type="button"
                  class="am-btn am-btn-default am-btn-success"
                  @click="exportAttendClassLecture"
                ><span class="am-icon-download"></span>导出
                </button>
              </div>
            </div>

          </div>

          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              border
              stripe
              style="min-width: 100%"
            >
              <el-table-column
                fixed
                prop="classNo"
                label="班级编号"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                fixed
                prop="className"
                label="班级名称"
                min-width="200"
              >
              </el-table-column>
              <el-table-column
                prop="gradeName"
                label="年级"
                min-width="120"
              >
              </el-table-column>
              <el-table-column
                prop="periodName"
                label="期名"
                min-width="120"
              >
              </el-table-column>
              <el-table-column
                prop="campusName"
                label="校区"
                min-width="200"
              >
              </el-table-column>

              <el-table-column
                prop="roomName"
                label="教室"
                min-width="120"
              >
              </el-table-column>

              <el-table-column
                prop="lectureNo"
                label="讲次"
                min-width="70"
              >
              </el-table-column>
              <el-table-column
                label="上课日期"
                min-width="150"
              >
                <template scope="scope">
                  {{scope.row.classDate | formatDate }}
                </template>
              </el-table-column>
              <el-table-column
                label="上课时间"
                min-width="150"
              >
                <template scope="scope">
                  {{scope.row.startTime }}-{{scope.row.endTime }}
                </template>
              </el-table-column>
              <el-table-column
                label="是否考勤"
                min-width="100"
              >
                <template scope="scope">
                  {{scope.row.attendanceStatus == 0 ? '否' : '是'}}
                </template>
              </el-table-column>
              <el-table-column
                prop="totalAmount"
                label="总人数"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="attendanceAmount"
                label="出勤人数"
                min-width="100"
              >
              </el-table-column>

              <el-table-column
                prop="absenceAmount"
                label="缺勤人数"
                min-width="100"
              >
              </el-table-column>

              <el-table-column
                prop="lateAmount"
                label="迟到人数"
                min-width="100"
              >
              </el-table-column>

              <el-table-column
                prop="leaveAmount"
                label="请假人数"
                min-width="100"
              >
              </el-table-column>

              <el-table-column
                prop="seniorName"
                label="班主任"
                min-width="100"
              >
              </el-table-column>

              <el-table-column
                prop="teacherName"
                label="任课老师"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="attendanceTime "
                label="考勤时间"
                min-width="100"
              >
              <template scope="scope">
                  {{scope.row.attendanceTime | formatTime}}
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="110"
              >
                <template scope="scope">
                  <el-button
                    size="small"
                    @click.native="showDetailWin(scope.row)"
                  >{{scope.row.attendanceStatus == 0 ? '考勤' : '修改考勤'}}</el-button>
                </template>
              </el-table-column>

            </el-table>
          </div>
          <div class="am-u-lg-12 am-cf">
            <div class="am-fr">
              <pagination
                v-bind:total="total"
                v-bind:pageNo="pageNo"
                v-bind:pageSize="pageSize"
                @paging="loadTableData"
              />
            </div>
          </div>

        </div>
      </div>
    </div>
    <detail-list
      :preAttend="preAttend"
      ref="attendanceRecordDetail"
      @completed="loadTableData()"
    ></detail-list>
  </div>
</template>
<script>
import { io, newProIo } from "../../lib/io/promiseIo";
import moment from "moment";
import Pagination from "../base/Pagination";
import AttendanceRecordDetailList from "./AttendanceRecordDetailList";
let today = new Date();
export default {
  data: function() {
    return {
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNo: 1,
      classDate: [today, today],
      query: {
        areaTeamId:
          (window.config.areaTeams[0] &&
            window.config.areaTeams[0].areaTeamId) ||
          "",
        busTeamId: "",
        periodId: "",
        timeSegment: "",
        classNo: "",
        teacherName: "",
        className: "",
        gradeId: "",
        subjectId: "",
        segmentNo: "",
        attendanceStatus: "",
        lectureNo: ""
      },
      periods: [],
      preAttend: false,
      timeList: []
    };
  },
  components: {
    Pagination,
    "detail-list": AttendanceRecordDetailList
  },
  watch: {
    "query.areaTeamId": function() {
      this.query.busTeamId = "";
      this.query.periodId = "";
      this.loadPeriodData();
    },
    "query.periodId": function() {
      this.query.timeSegment = "";
      this.searchTimeByDate();
    },
    classDate: function() {
      this.query.timeSegment = "";
      this.searchTimeByDate();
    }
  },
  mounted: function() {
    $(window).smoothScroll();
  },
  created: function() {
    this.$once("period.loaded", () => {
      this.loadTableData(this.pageNo);
      this.searchTimeByDate();
    });
    this.loadPeriodData();
    var _this = this;
    this.$root.$on("courseClass:new", function() {
      _this.pageNo = 1;
      _this.loadTableData(_this.pageNo);
    });
  },
  computed: {
    areaTeams: function() {
      var options = (this.$root.config.areaTeams || []).map(function(item) {
        return { value: item.areaTeamId, text: item.name };
      });
      return options;
    },
    busTeams: function() {
      var options = (this.query.areaTeamId
        ? this.$root.config.groupBusTeams[this.query.areaTeamId] || []
        : []
      ).map(function(item) {
        return { value: item.busTeamId, text: item.name };
      });
      this.query.busTeamId = "";
      return options;
    },
    grades: function() {
      return this.$root.config.grades.map(function(item) {
        return { value: item.gradeId, text: item.gradeName };
      });
    },
    subjects: function() {
      return this.$root.config.subjects.map(function(item) {
        return { value: item.subjectId, text: item.subjectName };
      });
    }
  },
  methods: {
    search: function() {
      if (!this.query.periodId) {
        this.$alert("请选择期数");
        return;
      }
      this.loadTableData(1);
    },
    searchTimeByDate() {
      if (this.classDate && this.classDate[1] && this.query.periodId) {
        newProIo
          .post(io.searchTimeByDate, {
            startClassDate: moment(this.classDate[0]).format("YYYY-MM-DD"),
            endClassDate: moment(this.classDate[1]).format("YYYY-MM-DD"),
            periodId: this.query.periodId
          })
          .then(res => {
            this.timeList = res.data || [];
          });
      }
    },
    loadTableData: function(pageNo) {
      var _this = this;
      _this.pageNo = pageNo || _this.pageNo || 1;
      console.log("query", this.classDate);
      let searchData = $.extend(
        {
          pageNo: _this.pageNo,
          pageSize: _this.pageSize
        },
        Object.assign({}, _this.query)
      );
      if (this.classDate) {
        searchData.startClassDate = this.classDate[0]
          ? moment(this.classDate[0]).format("YYYY-MM-DD")
          : "";
        searchData.endClassDate = this.classDate[1]
          ? moment(this.classDate[1]).format("YYYY-MM-DD")
          : "";
      }
      io.post(io.apiAdminAttendClassLectureList, searchData, function(ret) {
        if (ret.success) {
          _this.total = ret.data.total;
          _this.tableData = ret.data.list;
        } else {
          _this.$alert(ret.desc);
        }
      });
    },
    loadPeriodData: function() {
      var _this = this;
      io.post(
        io.apiAdminPeriodListForAreaTeam,
        {
          areaTeamId: this.query.areaTeamId
        },
        function(ret) {
          if (ret.success) {
            _this.periods = ret.data.map(function(item) {
              return { value: item.periodId, text: item.periodName };
            });
            _this.query.periodId = ret.data.filter(
              item => item.isCurrent == 1
            )[0].periodId;
            _this.$emit("period.loaded");
          } else {
            _this.$alert(ret.desc);
          }
        }
      );
    },
    exportAttendClassLecture() {
      (this.query.startClassDate =
        this.classDate.length === 2
          ? moment(this.classDate[0]).format("YYYY-MM-DD")
          : ""),
        (this.query.endClassDate =
          this.classDate.length === 2
            ? moment(this.classDate[1]).format("YYYY-MM-DD")
            : "");
      io.downloadFile(io.exportAttendClassLecture, this.query);
    },
    showDetailWin: function(attendanceRecord) {
      let startArr = attendanceRecord.startTime.split(":");
      if (
        Number(attendanceRecord.classDate) +
          Number(startArr[0]) * 60 * 60 * 1000 +
          Number(startArr[1]) * 60 * 1000 -
          new Date().getTime() >
        15 * 60 * 1000
      ) {
        this.preAttend = true;
      } else {
        this.preAttend = false;
      }
      this.$refs.attendanceRecordDetail.attendanceRecord = attendanceRecord;
      this.$refs.attendanceRecordDetail.show();
    }
  }
};
</script>
